<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div class="search">
				<input type="text" v-model="val" /><button type="button" @click="find">find</button>
			</div>
			<div class="list">
				<table border="1" cellspacing="0" cellpadding="0">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
					</tr>
					<tr v-for="(item,index) of findList">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.age}}</td>
						<td>{{item.sex}}</td>
					</tr>
				</table>
			</div>
		</div>
		
		
		
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let vm = new Vue({
				el:'#app',
				data:{
					dataList:[
						{
							id:1,
							name:'赵四',
							age:11,
							sex:'男'
						},
						{
							id:2,
							name:'张三',
							age:14,
							sex:'男'
						},
						{
							id:3,
							name:'小二',
							age:22,
							sex:'女'
						},
						{
							id:4,
							name:'李四',
							age:44,
							sex:'男'
						}
					],
					findList:[],
					val:''
				},
				methods:{
					find(){
						let  val = this.val
						// let that = this
						this.dataList.forEach( (x) => {
							if(val.indexOf(x.name) > -1){
								this.findList.push(x)//this指向的事window，解决方案
							}
							if(val.indexOf(x.id) > -1){
								this.findList.push(x)//this指向的事window，解决方案
							}
						})
					}
				}
			})
		</script>
		
	</body>
</html>
